<template>
  <div v-loading="loading">
    <div class="text-right mb-2">
      <el-button size="small" :disabled="loading" @click="handleFlow">审批流程</el-button>
      <el-button
        size="small"
        icon="el-icon-printer"
        v-show="!editable"
        :disabled="loading"
        @click="handlePrint"
      >
        打印
      </el-button>
    </div>

    <div :id="printId">
      <approve-info :related="related"></approve-info>
      <template v-for="(approve, index) of approval">
        <component
          v-bind="$attrs"
          v-if="approve.show"
          :key="index"
          :is="approve.cmpt"
          :view-mode="viewMode"
          :related-data="related"
          :approve-data="approve"
          @success="handleSuccess"
          @dismiss="handleDismiss"
        ></component>
      </template>
    </div>

    <flow-dialog :title="flowName" :visible.sync="flowVisible" :flow-key="flowKey"></flow-dialog>
  </div>
</template>

<script>
import { printA4 } from '@vimi/utils-tool'
import FlowDialog from '@/credit/components/flow/ViewDialog'
import { getRelated } from '@/credit/views/county/unionProvince/components/projectApprove/index'
import { getApproveProcess, wfKey } from '@/credit/views/city/self/components/loanApprove/index'
import ApproveCommon from '@/credit/views/city/self/components/loanApprove/ApproveCommon'
import ApproveInfo from '@/credit/views/city/self/components/loanApprove/ApproveInfo'
import ApproveRes from '@/credit/views/city/self/components/loanApprove/ApproveRes'
export default {
  components: {
    FlowDialog,
    ApproveCommon,
    ApproveInfo,
    ApproveRes,
  },
  props: {
    queryId: {
      type: String,
      required: true,
    },
    viewMode: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      flowKey: wfKey,
      loading: false,
      approval: [],
      related: {},
      flowVisible: false,
    }
  },
  computed: {
    editable() {
      return !this.viewMode && this.approval.some(it => it.editable)
    },
    flowName() {
      const { approval } = this
      return approval.length ? approval[0].process.workflow_name : '流程'
    },
    printId() {
      return `${this.queryId}-loan-approve`
    },
  },
  watch: {
    queryId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    getData() {
      const { queryId } = this
      if (!queryId) {
        return
      }

      this.loading = true
      return Promise.all([
        getRelated(queryId),
        getApproveProcess(queryId, this.$store.getters.user),
        this.$store.dispatch('getEntrustContract', queryId),
      ])
        .then(([related, approval]) => {
          this.related = related
          const data = approval[0] ?? {}
          const rekey = data.process?.wfn_key ?? null
          this.approval = approval.map(item => {
            if (item.process?.wfn_key !== rekey) {
              item.rekey = rekey
            }
            return item
          })
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleSuccess(res) {
      this.$emit('success', res)
    },

    handleDismiss() {
      this.$emit('dismiss')
    },
    handleFlow() {
      this.flowVisible = true
    },
    handlePrint() {
      printA4(
        document.getElementById(this.printId).innerHTML,
        `
        .vertical-align-middle td {vertical-align: middle;}
        .option {min-height: 7rem;}
      `
      )
    },
  },
}
</script>
<style lang="scss" scoped></style>
